<template>
  <div class="lsd">
    <el-dialog
      title="集体建设用地占用联审单"
      top="22vh"
      :visible.sync="visible"
      @close="$emit('update:show', false)"
      :show="show"
      class="lsdhead"
    >
      <div>
        <div class="main">
          <!-- <div class="main-top">
          <h3>集体建设用地占用联审单</h3>
        </div> -->
          <div class="main-bottom">
            <div class="item1">
              <table cellspacing="0" cellpadding="0" class="outtable">
                <tbody align="center">
                  <tr>
                    <td align="right" width="18%">项目名称&nbsp;&nbsp;</td>
                    <td align="left">&nbsp;&nbsp;{{ project.projectName }}</td>
                    <td align="right" width="18%">日期&nbsp;&nbsp;</td>
                    <td align="left">&nbsp;&nbsp;{{ project.startTime }}</td>
                  </tr>
                  <tr>
                    <td align="right">经办人&nbsp;&nbsp;</td>
                    <td align="left">&nbsp;&nbsp;{{ project.agent }}</td>
                    <td align="right">联系方式&nbsp;&nbsp;</td>
                    <td align="left">
                      &nbsp;&nbsp;{{ project.contactInformation }}
                    </td>
                  </tr>
                  <tr>
                    <td align="right">宗地位置&nbsp;&nbsp;</td>
                    <td align="left">&nbsp;&nbsp;{{ project.position }}</td>
                    <td align="right">具体位置&nbsp;&nbsp;</td>
                    <td align="left">
                      &nbsp;&nbsp;{{ project.specificLocation }}
                    </td>
                  </tr>
                  <tr>
                    <td align="right">宗地面积(平方米)&nbsp;&nbsp;</td>
                    <td align="left">&nbsp;&nbsp;{{ project.landAreaRice }}</td>
                    <td align="right">宗地面积(亩)&nbsp;&nbsp;</td>
                    <td align="left">&nbsp;&nbsp;{{ project.landAreaMu }}</td>
                  </tr>
                  <tr>
                    <td align="right">容积率&nbsp;&nbsp;</td>
                    <td align="left">&nbsp;&nbsp;{{ project.plotRatio }}</td>
                    <td align="right">建筑密度&nbsp;&nbsp;</td>
                    <td align="left">
                      &nbsp;&nbsp;{{ project.buildingDensity }}
                    </td>
                  </tr>

                  <tr>
                    <td align="right">绿化率%&nbsp;&nbsp;</td>
                    <td align="left" colspan="3">
                      &nbsp;&nbsp;{{ project.greeningRate }}
                    </td>
                  </tr>
                  <tr>
                    <td align="right">规划用途&nbsp;&nbsp;</td>
                    <td align="left" colspan="3">
                      &nbsp;&nbsp;
                      {{ project.plannedUse }}
                    </td>
                  </tr>
                  <tr>
                    <td align="right">政府审批意见&nbsp;&nbsp;</td>
                    <td align="left" colspan="3">
                      &nbsp;&nbsp; {{ project.govermentOpinion }}
                    </td>
                  </tr>
                  <tr>
                    <td align="right">其他说明&nbsp;&nbsp;</td>
                    <td align="left" colspan="3">
                      &nbsp;&nbsp; {{ project.otherInstructions }}
                    </td>
                  </tr>

                  <tr>
                    <td align="right">中心所(分局)意见&nbsp;&nbsp;</td>
                    <td align="left" colspan="3" style="height: 80px">
                      <ul class="zxsyj">
                        <li>
                          <div class="idea">{{ project.centralOpinion }}</div>
                          <div class="info">
                            <span class="jbr">负责人:wxh</span>
                            <span class="date">日期:2021-6-9</span>
                          </div>
                        </li>
                      </ul>
                    </td>
                  </tr>
                  <tr v-for="item in projectInfo1" :key="item.id">
                   
                    <td align="right"> {{item[0].node}}&nbsp;&nbsp;</td>
                    <td colspan="3" style="height: 80px">
                      <ul class="gqyj">
                        <li>
                          <div class="idea">
                            {{ item[0].opinion }}
                          </div>
                          <div class="info">
                            <span class="jbr">经办人:{{ item[0].userName }}</span>
                            <span class="date">日期:{{ item[0].createTime }}</span>
                          </div>
                        </li>
                        <li v-if="item[1]">
                          <div class="idea">
                              {{item[1].opinion}}
                          </div>
                          <div class="info">
                            <span class="jbr"
                              >负责人:{{ item[1].userName }}</span
                            >
                            <span class="date"
                              >日期:{{ item[1].userName }}</span
                            >
                          </div>
                        </li>
                      </ul>
                    </td>
                  </tr>
                  <!-- 联审意见 -->
                  <!-- <tr style="height: 400px">
                    <td colspan="2">
                      <table cellpadding="0" cellspacing="0" class="lsyjtable">
                        <tr>
                          <td align="right">信息中心意见</td>
                          <td class="colorwhite">
                            <ul class="tongyong">
                              <li>
                                <div class="idea">
                                  {{ xxzxlist.circulationOpinions }}
                                </div>
                                <div class="info">
                                  <span class="jbr"
                                    >经办人:{{ xxzxlist.sender }}</span
                                  >
                                  <span class="date"
                                    >日期:{{ xxzxlist.sendDate }}</span
                                  >
                                </div>
                              </li>
                            </ul>
                          </td>
                          <td class="colorwhite">
                            <ul class="tongyong">
                              <li>
                                <div class="idea">
                                  {{ xxzxlist.personOpinions }}
                                </div>
                                <div class="info">
                                  <span class="jbr"
                                    >经办人:{{ xxzxlist.chargePerson }}</span
                                  >
                                  <span class="date"
                                    >日期:{{ xxzxlist.responsibleDate }}</span
                                  >
                                </div>
                              </li>
                            </ul>
                          </td>
                        </tr>
                        
                      </table>
                    </td>
                  </tr> -->
                  <!-- <tr style="height: 400px" >
                  <td colspan="4">
                    <table cellpadding="0" cellspacing="0" class="lsyjtable">
                      <tr>
                        <td rowspan="5" width="2.5%" align="center" class="bdc">
                          联审意见
                        </td>
                        <td width="15.5%" align="right">核实办意见</td>
                        <td class="colorwhite">
                          <ul class="tongyong">
                            <li>
                              <div class="idea">{{hslist.circulationOpinions}}</div>
                              <div class="info">
                                <span class="jbr">经办人:{{hslist.sender}}</span>
                                <span class="date">日期:{{hslist.sendDate}}</span>
                              </div>
                            </li>
                          </ul>
                        </td>
                        <td class="colorwhite">
                            <ul class="tongyong">
                            <li>
                              <div class="idea">{{hslist.personOpinions}}</div>
                              <div class="info">
                                <span class="jbr">负责人:{{hslist.chargePerson}}</span>
                                <span class="date">日期:{{hslist.responsibleDate}}</span>
                              </div>
                            </li>
                            </ul>
                        </td>
                      </tr>
                      <tr>
                        <td align="right">信息中心意见</td>
                        <td class="colorwhite">
                          <ul class="tongyong">
                            <li>
                              <div class="idea">{{xxzxlist.circulationOpinions}}</div>
                              <div class="info">
                                <span class="jbr">经办人:{{xxzxlist.sender}}</span>
                                <span class="date">日期:{{xxzxlist.sendDate}}</span>
                              </div>
                            </li>
                          </ul>
                        </td>
                        <td class="colorwhite">
                          <ul class="tongyong">
                            <li>
                              <div class="idea">{{xxzxlist.personOpinions}}</div>
                              <div class="info">
                                <span class="jbr">经办人:{{xxzxlist.chargePerson}}</span>
                                <span class="date">日期:{{xxzxlist.responsibleDate}}</span>
                              </div>
                            </li>
                          </ul>
                        </td>
                      </tr>
                      <tr>
                        <td align="right">土地储备中心意见</td>
                       <td class="colorwhite">
                          <ul class="tongyong">
                            <li>
                              <div class="idea">{{tdcblist.circulationOpinions}}</div>
                              <div class="info">
                                <span class="jbr">经办人:{{tdcblist.sender}}</span>
                                <span class="date">日期:{{tdcblist.sendDate}}</span>
                              </div>
                            </li>
                          </ul>
                        </td>
                        <td class="colorwhite">
                          <ul class="tongyong">
                            <li>
                              <div class="idea">{{tdcblist.personOpinions}}</div>
                              <div class="info">
                                <span class="jbr">经办人:{{tdcblist.chargePerson}}</span>
                                <span class="date">日期:{{tdcblist.responsibleDate}}</span>
                              </div>
                            </li>
                          </ul>
                        </td>
                      </tr>
                      <tr>
                        <td align="right">执法大队意见</td>
                        <td class="colorwhite">
                          <ul class="tongyong">
                            <li>
                              <div class="idea">{{zfddlist.circulationOpinions}}</div>
                              <div class="info">
                                <span class="jbr">经办人:{{zfddlist.sender}}</span>
                                <span class="date">日期:{{zfddlist.sendDate}}</span>
                              </div>
                            </li>
                          </ul>
                        </td>
                        <td class="colorwhite">
                          <ul class="tongyong">
                            <li>
                              <div class="idea">{{zfddlist.personOpinions}}</div>
                              <div class="info">
                                <span class="jbr">经办人:{{zfddlist.chargePerson}}</span>
                                <span class="date">日期:{{zfddlist.responsibleDate}}</span>
                              </div>
                            </li>
                          </ul>
                        </td>
                      </tr>
                      <tr >
                        <td class="bdc" align="right">不动产登记中心意见</td>
                        <td class="colorwhite bdc">
                          <ul class="tongyong1">
                            <li>
                              <div class="idea">{{bdclist.circulationOpinions}}</div>
                              <div class="info">
                                <span class="jbr">经办人:{{bdclist.sender}}</span>
                                <span class="date">日期:{{bdclist.sendDate}}</span>
                              </div>
                            </li>
                          </ul>
                        </td>
                        <td class="colorwhite bdc">
                          <ul class="tongyong">
                            <li>
                              <div class="idea">{{bdclist.personOpinions}}</div>
                              <div class="info">
                                <span class="jbr">经办人:{{bdclist.chargePerson}}</span>
                                <span class="date">日期:{{bdclist.responsibleDate}}</span>
                              </div>
                            </li>
                          </ul>
                        </td>
                      </tr>
                    </table>
                  </td>
                  </tr> -->
                  <tr class="hz">
                    <td align="right">汇总联审意见&nbsp;&nbsp;</td>
                    <td align="left" colspan="3" style="height: 80px">
                      <ul class="zxsyj">
                        <li>
                          <div class="idea">
                            
                          </div>
                          <div class="info">
                            <span class="jbr"
                              >负责人:</span
                            >
                            <span class="date"
                              >日期:</span
                            >
                          </div>
                        </li>
                      </ul>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
 
<script>
import { getlsdList } from "@/api/ywsp/db.js";
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      businessId: '',
      processInstanceId:'',
      visible: this.show,
      project:'',
      projectInfo1: [],
      list: [],
      gqlist: [], //股权意见
      hzlsList: [], //汇总联审意见
      hslist: [], //核实办意见
      xxzxlist: [], //信息中心意见
      tdcblist: [], //土地储备中心
      zfddlist: [], //执法大队
      bdclist: [], //不动产登记
    };
  },
  async created() {
    this.businessId = this.$route.query.businessId;
    this.processInstanceId=this.$route.query.processInstanceId;
    const res = await getlsdList({
      businessId: this.businessId,
      processInstanceId:this.processInstanceId
    });
    // console.log(res);
    this.project = res.data.result.project;
    this.projectInfo1=res.data.result.businessListMap

    //this.projectInfo1 =res.data.result.list.filter(item => {
      // return item.type.indexOf('startEvent') ==-1 && item.type.indexOf('endEvent') ==-1
      // return item.type.indexOf('userTask')!=-1
   // })
    // this.list = res.data.result.list;
    // console.log(this.list);
    // this.gqlist = this.list[0];
    // this.hzlsList = this.list[1];
    // this.hslist = this.list[2];
    // this.xxzxlist = this.list[3];
    // this.tdcblist = this.list[4];
    // this.zfddlist = this.list[5];
    // this.bdclist = this.list[6];
    // this.projectInfo1 = res.data.result[0]["tsqdw"];
    // console.log(this.projectInfo);
  },
  watch: {
    show() {
      this.visible = this.show;
    },
  },
  methods:{
    getSubString(string) {
      return string.indexOf('经办人') || string.indexOf('负责人')
    }
  }
};
</script>

<style lang="scss" scoped>
.lsd {
  /deep/ .lsdhead .el-dialog .el-dialog__header {
    height: 42px;
    background: #f4f6f8 !important;
  }
  /deep/.el-dialog__title {
    font-size: 14px;
    color: black;
    font-weight: bold;
  }
  //联审单
}

.noborder {
  border-bottom: none;
}
.bdc {
  border-bottom: none !important;
}
.zxsyj {
  display: flex;
  li {
    flex: 1;
    display: flex;
    // flex-direction: column;
    // justify-content: center;
    // align-content: center;
    height: 100%;
    .idea {
      margin-left: 10px;
      margin-top: 10px;
    }
    .info {
      margin-top: 50px;
      margin-left: 210px;
      .jbr {
        margin-left: 130px;
      }
      .date {
        margin-left: 170px;
      }
    }
  }
}
.tongyong {
  height: 100%;
  display: flex;
  li {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    height: 100%;
    .idea {
      margin-left: 10px;
    }
    .info {
      margin-top: 20px;
      .jbr {
        margin-right: 20%;
        margin-left: 10px;
      }
    }
  }
}
.tongyong1 {
  height: 100%;
  display: flex;
  li {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    height: 100%;
    .idea {
      margin-left: 10px;
    }
    .info {
      margin-top: 20px;
      .jbr {
        margin-right: 162px;
        margin-left: 10px;
      }
    }
  }
}
.gqyj {
  height: 100%;
  display: flex;
  li {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    height: 100%;
  }
  li:nth-child(1) {
    border-right: 1px solid #dfe2eb;
    margin-right: -12px;
  }
  .idea {
    margin-left: -310px;
  }
  .info {
    margin-top: 20px;
    .jbr {
      
    }
    .date {
      margin-left:10%;
    }
  }
}
.main {
  // width:1075px;
  width: 100%;
  // height: calc(100% - 60px);
  // height: 763px;
  // overflow-y: scroll;
  // height: 100%;
  padding-right: 20px;
  margin: 0 auto;
  h5 {
    font-size: 14px;
    margin-bottom: 12px;
  }
  .main-top {
    height: 50px;
    margin-top: 10px;
    text-align: center;
    h3 {
      font-size: 20px;
    }
  }
  .main-bottom {
    margin: 0 auto;
    .item1 {
      margin-bottom: 30px;
      .outtable {
        width: 100%;
        height: 100%;
        // border: 1px solid #E0E1E2;
        border-top: 1px solid #dfe2eb;
        border-left: 1px solid #dfe2eb;
        // border:0.5px solid #dfe2eb;
        // border:0.5px solid #dfe2eb;

        td {
          height: 42px;
          font-size: 12px;
          // border: 0.5px solid #dfe2eb;
          border-right: 1px solid #dfe2eb;
          border-bottom: 1px solid #dfe2eb;
        }
        td:nth-child(2n + 1) {
          background-color: #f8f8f8;
          color: #606266;
          font-size: 12px;
        }
      }
      .lsyjtable {
        height: 100%;
        td:last-child {
          border-right: none;
        }
        .colorwhite {
          background-color: #fff !important;
        }
      }
    }
  }
}
</style>